<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;script-src * 'unsafe-inline'"
    />
    <style>
      html {
        min-height: 50rem;
        min-width: 35rem;
        background: white;
      }
      .navbar-nav .nav-link {
      padding: 0.1rem .1rem;
      line-height: .8rem;
      font-size: .9rem;
      margin: 0%;
      border: 0%;
    }
    /* 按钮去掉点击时候出现的边框 */
    .btn:focus {
        box-shadow: none !important;
      }
      
    </style>
    <link rel="stylesheet" href="static/css/bootstrap.css" />

    <script type="text/javascript"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link"  href="/index.html" draggable="false">常用</a>
          </li>
          <li class="nav-item">
            <a class="nav-link"  href="/decode.html" draggable="false">编码</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/convert.html" draggable="false">转换</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link"  href="/crypto.html" draggable="false">加密</a>
          </li>
          <!-- <li class="nav-item">
            <a class="nav-link" href="/setting.html" draggable="false">设置</a>
          </li> -->
        </ul>
      </div>
    </nav>

    <div class="card" style="margin: 0.5rem;margin-top:2.7rem;">
      <div class="card-header" style="padding: 0.4rem">
        <div class="form-group" style="margin-right: .5rem;padding: .3rem;margin-bottom: 0rem;">
          <select id="crypto-select" class="form-control"  style="background-color: #bfd7d5;color: #152635;width: 8rem;height: 1.8rem;font-size: .8rem;padding: 0%;margin: 0%;padding-left: .3rem;">
            <!-- <option selected value="0">AES加密/解密</option> -->
            <option selected  value="1">DES加密/解密</option>
        </select>
          </div>
        <!-- <span class="badge">  -->
           

      </div>
      <div class="card-body" style="padding: 0%">
        <div class="container-fluid">
          <div class="row" style="margin-top: 0.4rem">
            <div class="col-12">
              <textarea
                id="crypto-input"
                class="form-control"
                rows="5"
              ></textarea>
            </div>
          </div>
          <div class="row" style="margin-top: 0.4rem">
            <div class="col-7 text-left">
              <span>mode:</span>
              <span class="badge"> 
                <select id="crypto-mode">
                    <option selected value="ECB">ECB</option>
                    <option value="CBC">CBC</option>
                    <option value="CFB">CFB</option>
                    <option value="CTR">CTR</option>
                    <option value="OFB">OFB</option>
                </select>
            </span>
            <span>padding:</span>
            <span class="badge"> 
              <select id="crypto-padding">
                  <option selected value="Pkcs7">Pkcs7</option>
                  <option value="Iso97971">Iso97971</option>
                  <option value="AnsiX923">AnsiX923</option>
                  <option value="Iso10126">Iso10126</option>
                  <option value="ZeroPadding">ZeroPadding</option>
                  <option value="NoPadding">NoPadding</option>
              </select>
          </span>

            </div>
            <div class="col-5">
         <input type="" class="form-control" placeholder="iv" id="crypto-iv"/>
            </div>
          </div>
          <div
            class="row text-center"
            style="padding-top: 0.6rem; padding-bottom: 0.6rem"
          >
            <div
              class="col-2"
              style="
                padding-top: 0.5rem;
                padding-left: 0.5rem;
                padding-right: 0rem;
              "
            >
              加密秘钥:
            </div>
            <div class="col-6" style="padding-left: 0rem; padding-right: 0%;height: 80%;">
              <input

                type="email"
                class="form-control"
                placeholder="key"
                id="crypto-key"
              />
            </div>
            <div
              class="col-4"
              style="
                padding-left: 0.8rem;
                text-align: left;
                padding-top: 0.2rem;
              "
            >
              <!-- <div class="btn-group btn-group-sm"> -->
              <button type="button" id="button-encode" class="btn btn-sm btn-primary">加密</button>
              <button type="button" id="button-decode" class="btn btn-sm btn-success">解密</button>
              <!-- <button type="button" class="btn btn-primary">位置转换</button> -->
              <!-- </div> -->
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <textarea
                id="crypto-output"
                class="form-control"
                rows="5"
             disabled ></textarea>
              <br />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="container">
      OFB和CTR不需要填充

    </div> -->
    <script src="static/js/jquery-3.5.1.js"></script>

    <script src="static/js/bootstrap/bootstrap.js"></script>
   
    <script src="static/js/CryptoJS/components/core-min.js"></script>
    <script src="static/js/CryptoJS/components/md5-min.js"></script>
    <script src="static/js/CryptoJS/components/evpkdf-min.js"></script>
    <script src="static/js/CryptoJS/components/cipher-core-min.js"></script>
    <script src="static/js/CryptoJS/components/enc-base64-min.js"></script>
    <script src="static/js/CryptoJS/components/enc-utf16-min.js"></script>
    <script src="static/js/CryptoJS/components/format-hex-min.js"></script>
    <script src="static/js/CryptoJS/components/hmac-min.js"></script>
    <script src="static/js/CryptoJS/components/lib-typedarrays-min.js"></script>
    <script src="static/js/CryptoJS/components/mode-cfb-min.js"></script>
    <script src="static/js/CryptoJS/components/mode-ctr-gladman-min.js"></script>
    <script src="static/js/CryptoJS/components/mode-ctr-min.js"></script>
    <script src="static/js/CryptoJS/components/mode-ecb-min.js"></script>
    <script src="static/js/CryptoJS/components/mode-ofb-min.js"></script>
    <script src="static/js/CryptoJS/components/pad-ansix923-min.js"></script>
    <script src="static/js/CryptoJS/components/pad-iso10126-min.js"></script>
    <script src="static/js/CryptoJS/components/pad-iso97971-min.js"></script>
    <script src="static/js/CryptoJS/components/pad-nopadding-min.js"></script>
    <script src="static/js/CryptoJS/components/pad-zeropadding-min.js"></script>
    <script src="static/js/CryptoJS/components/pbkdf2-min.js"></script>
    <script src="static/js/CryptoJS/components/rabbit-legacy-min.js"></script>
    <script src="static/js/CryptoJS/components/rabbit-min.js"></script>
    <script src="static/js/CryptoJS/components/rc4-min.js"></script>
    <script src="static/js/CryptoJS/components/ripemd160-min.js"></script>
    <script src="static/js/CryptoJS/components/sha1-min.js"></script>
    <script src="static/js/CryptoJS/components/sha256-min.js"></script>
    <script src="static/js/CryptoJS/components/tripledes-min.js"></script>
    <script src="static/js/CryptoJS/components/x64-core-min.js"></script>
    <script src="static/js/CryptoJS/components/aes-min.js"></script>
    <script src="static/js/CryptoJS/components/sha224-min.js"></script>
    <script src="static/js/CryptoJS/components/sha3-min.js"></script>
    <script src="static/js/CryptoJS/components/sha512-min.js"></script>
    <script src="static/js/CryptoJS/components/sha384-min.js"></script>

    <script type="text/javascript" src="static/js/lib/crypto.js"></script>

  </body>
</html>
